<template>
  <div>
    <video src="" width="500" height="500" id="videoId"></video>
    <canvas id="canvasId"></canvas>
    <button @click="strat()">开始</button>
    <button @click="end()">结束</button>
    <button @click="downloadImg()">图片</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      cs:null
    }
  },
  mounted(){
    this.cs = new this.$gsdUtils.screenshot('videoId','canvasId',false)
  },
  methods:{
    strat(){
      this.cs.startCapture()
    },
    end(){
      this.cs.stopCapture().then(res=>{
        console.log(res,'res')
      })
    },
    downloadImg(){
      let imageBolb = this.cs.downloadImg(true)
      console.log(imageBolb,'imageBolb')
    }
  }
}
</script>

<style>
#canvasId{
  position: fixed;
  right: -55555px;
}
</style>